﻿<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>摄像头拍照</title>
  <style>
	 .videoDiv{
		width:100%;
		height:100%;
	  }
	  #video{
		//display: none
	  }
	  .capBtn{
		width:100%;
		height:60px;
	  }
  </style>
</head>
<body>
  <video id="video" width="480" height="320" controls>
  </video>
  <div>
    <button id="capture" class="capBtn">拍照</button>
  </div>
  <canvas id="canvas1" width="480" height="320" style="position:absolute;"></canvas>
  <canvas id="canvas" width="480" height="320" style="background-color:black;position:flex;float:left"></canvas>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script>
	//let http="http://127.0.0.1:80/face"  //本地 nginx
	let http="http://120.78.130.131/face" //远程调用
	//let http="http://127.0.0.1:8088/face" 本地 服务器
	//var ws = new WebSocket("ws://127.0.0.1:8080/face/chat");
	//ws.onopen = function()
   //{
	  // Web Socket 已连接上，使用 send() 方法发送数据
	 // ws.send("客户端请求连接");
   //};
	
    //访问用户媒体设备的兼容方法
    function getUserMedia(constraints, success, error) {
      if (navigator.mediaDevices.getUserMedia) {
        //最新的标准API
        navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
      } else if (navigator.webkitGetUserMedia) {
        //webkit核心浏览器
        navigator.webkitGetUserMedia(constraints,success, error)
      } else if (navigator.mozGetUserMedia) {
        //firfox浏览器
        navigator.mozGetUserMedia(constraints, success, error);
      } else if (navigator.getUserMedia) {
        //旧版API
        navigator.getUserMedia(constraints, success, error);
      }
    }

    let video = document.getElementById('video');
    let canvas = document.getElementById('canvas');
	let canvas1 = document.getElementById('canvas1');
	let context1 = canvas1.getContext('2d');
    let context = canvas.getContext('2d');
	let t1;
	
	//websoket 接收消息
	/* ws.onmessage = function (eva) {  // 收到服务器发送的消息后执行的回调
		var e = JSON.parse(eva.data)
		context1.font="25px Georgia";
		context1.fillStyle="rgba(255,0,0)";
		context1.clearRect(0,0,canvas.width,canvas.height);  
	   if(e.code=="success"){
			console.log(e)
			//var tmp = context.getImageData(0 , 0, canvas.width , canvas.height);
			//context.putImageData(tmp,0 ,0);
			
			let data = e.data;
			context1.fillText(data.name, data.left,data.bottom-6);

			//绘制边框
			context1.strokeStyle="rgba(0,255,0,0.5)";
			context1.lineWidth=3;
			var rectW =  data.right - data.left
			var rectH =  data.bottom - data.top
			context1.strokeRect(data.left,data.top,rectW,rectH)
		}else{
			context1.fillText("无法识别，请重新捕获！",0,320/2);
		}
	}; */
	
    function success(stream) {
      //兼容webkit核心浏览器
      let CompatibleURL = window.URL || window.webkitURL;
      //将视频流设置为video元素的源
      console.log(stream);
      //video.src = CompatibleURL.createObjectURL(stream);
      video.srcObject = stream;
      video.play();
	 
	 // t1 = window.setInterval(recorgnFace,1000); 
    }
	
	function recorgnFace(){
		lightImage(video,0,0,1.5)
	    uploadImg(canvas.toDataURL('image/png'))
		
		//data = canvas.toDataURL('image/png')
		//data = data.replace("data:image/png;base64,","")
		//ws.send(data);
	}

		
    function error(error) {
      console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
    }

    if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
      //调用用户媒体设备, 访问摄像头
      getUserMedia({video : {width: 480, height: 320}}, success, error);
    } else {
      alert('不支持访问用户媒体');
    }

    document.getElementById('capture').addEventListener('click', function () {
     //context.drawImage(video, 0, 0, 480, 320);  
	  //console.log(data)
	  recorgnFace();
    })
	
	function lightImage(image , x  , y , light)
	{
		// 绘制图片
		context.drawImage(image , x , y);
		// 获取从x、y开始，宽为image.width、高为image.height的图片数据
		// 也就是获取绘制的图片数据
		var imgData = context.getImageData(x , y , image.width , image.height);
		for (var i = 0 , len = imgData.data.length ; i < len ; i += 4 )
		{
			// 改变每个像素的R、G、B值
			imgData.data[i + 0] = imgData.data[i + 0] * light;
			imgData.data[i + 1] = imgData.data[i + 1] * light;
			imgData.data[i + 2] = imgData.data[i + 2] * light;
		}
		// 将获取的图片数据放回去。
		context.putImageData(imgData , x , y);
	}
	
	function uploadImg(data){
		data = data.replace("data:image/png;base64,","")
		$.ajax({
			type:'post',
			url:http+'/recognFace',
			async:false, 
			//xhrFields: { withCredentials: true },
			data:{data:data},
			success:function(e){
				context.font="25px Georgia";
				context.fillStyle="rgba(255,0,0)";
				if(e.code=="success"){
					//var tmp = context.getImageData(0 , 0, canvas.width , canvas.height);
					//context.clearRect(0,0,canvas.width,canvas.height);  
					//context.putImageData(tmp,0 ,0);
					let data = e.data;
					context.fillText(data.name, data.left,data.bottom-6);

					//绘制边框
					context.strokeStyle="rgba(0,255,0,0.5)";
					context.lineWidth=3;
					var rectW =  data.right - data.left
					var rectH =  data.bottom - data.top
					context.strokeRect(data.left,data.top,rectW,rectH)
					//window.clearInterval(t1);
				}else{
					context.fillText("无法识别，请重新捕获！",0,320/2);
				}
			}
		})
	}
  </script>
</body>
</html>